<template>
    <view class="page">
        <view class="createPep_box">
            <view class="createPep_left_box">
                创建人
            </view>
            <view class="createPep_right_box">
                {{ createName }}
            </view>
        </view>
        <view class="Room_box">
            <view class="Room_left_box">
                房间名
            </view>
            <view class="Room_right_box">
                <u-input v-model="roomName" placeholder="输入房间名" input-align="right" :clearable=false />
            </view>
        </view>
        <view class="Room_box">
            <view class="Room_left_box">
                介绍
            </view>
            <view class="Room_right_box">
                <u-input v-model="introduceValue" placeholder="输入介绍" input-align="right" :clearable=false />
            </view>
        </view>
        <view class="Room_box">
            <view class="Room_left_box">
                进房口令
            </view>
            <view class="Room_right_box">
                <u-input v-model="commandValue" placeholder="输入口令" input-align="right" :clearable=false />
            </view>
        </view>
        <view class="Drawing_box">
            <view class="Drawing_left_box">
                开奖时间
            </view>
            <view :class="date == '选择日期' ? 'Drawing_right_box' : 'date_right_box'" @click="dataBtn">
                {{ date }}
            </view>
        </view>
        <view class="upLoad_img_box">
            <view class="title_box">奖品</view>
            <view class="upload_box">
                <view class="upload_add_box" v-for="item, index in showlist" :key="index">
                    <image :src="item.prize_icon" mode="scaleToFill" />
                    <view class="pop_box">
                        <u-icon name="close" size="28" @click="popGoods(item)"></u-icon>
                    </view>
                </view>
                <view class="upload_add_box" @click="selectGoods">
                    <u-icon name="plus-circle" :bold="false" color="#F5B143" size="80"></u-icon>
                </view>

            </view>
        </view>
        <view class="create_Room_btn" @click="createBtn">创建房间</view>
        <view class="rule_box">规则说明</view>
        <view style="width:100%;height:100rpx;"></view>
        <!-- 选择日期 -->
        <u-calendar v-model="dateShow" max-date="2050-12-31" :mode="mode" @change="dateChange"></u-calendar>
        <uni-popup mode="center" ref="selectTc" border-radius="20">
            <view class="select_shop_box">
                <view class="select_title_box">请选择</view>
                <scroll-view scroll-y class="select_big_box" @scrolltolower="lower()">
                    <view class="dange_box" v-for="item, index in conList" :key="index" @click="selecClick(item)">
                        <view class="zhezhao_box" v-if="item.checkout == true">
                        </view>
                        <image :src="item.prize_icon" mode="scaleToFill" />
                    </view>
                </scroll-view>
                <view class="select_button" @click="enterSubmit">确认</view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            action: 'https://new.qingfentool.vip/api/v1/upload/file',//图片上传地址
            header: {
                Authorization: 'Bearer ' + uni.getStorageSync("USERINFO"),
            },
            roomName: '',//房间名
            introduceValue: '',//介绍
            commandValue: '',//口令
            date: "选择日期",//选择日期
            dateShow: false,//是否显示日期组件
            mode: 'date',//日期模式 多日期：multiple 单个日期：date
            //上传图片
            fileList: [],//上传图片列表
            imageUrl: [],//图片
            conList: [],//弹窗商品列表
            newConlist: [],//选择的奖品
            showlist: [],//外部显示的列表
            createName: '',//创建人
            page: 1,//分页
            flag: true,//防抖
        }
    },
    onShow() {
        this.createName = uni.getStorageSync("username")
    },
    methods: {
        lower() {
            console.log("触底刷新")
            if (this.flag) {
                this.getList();
            } else {
                uni.showToast({
                    title: "没有更多了",
                    icon: 'none'
                })
            }
        },
        // 弹窗选择商品列表
        selecClick(item) {
            if (item.checkout == false) {
                item.checkout = true
                this.newConlist.push(item)
            } else {
                item.checkout = false
                for (var i = 0; i < this.newConlist.length; i++) {
                    if (this.newConlist[i].checkout === false) {
                        this.newConlist.splice(i, 1);
                    }
                }
            }
        },
        // 选择确认按钮
        enterSubmit() {
            this.showlist = this.newConlist
            this.conList = []
            this.page = 1
            this.$refs.selectTc.close()
        },
        dataBtn() {
            this.dateShow = true
        },
        // 选择日期
        dateChange(e) {
            if (this.mode == 'date') {
                this.date = e.result
            } else {
                this.date = e.startDate + "至" + e.endDate
            }
        },
        // 创建
        createBtn() {
            console.log(this.newConlist, "确认")
            var prize_id = []
            this.newConlist.forEach(item => {
                console.log(item.order_id)
                prize_id.push(item.order_id)
            })
            let data = {
                room_name: this.roomName,
                description: this.introduceValue,
                password: this.commandValue,
                lottery_time: this.date,
                prize_id: prize_id.toString()

            }
            this.$Request.post(this.$api.house.welfareCreate, data).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon:'none',
                })
                setTimeout(()=>{
                    uni.navigateBack()
                },1000)
            })
        },
        // 添加商品图片
        selectGoods() {
            this.getList()
            this.$refs.selectTc.open()

        },
        //提交之前删除
        popGoods(item) {
            item.checkout = false
            for (var i = 0; i < this.newConlist.length; i++) {
                if (this.newConlist[i].checkout === false) {
                    this.newConlist.splice(i, 1);
                }
            }
        },
        // 选择添加的商品列表
        getList() {
            let data = {
                page: this.page
            }
            this.$Request.get(this.$api.order.orderList, data).then(res => {
                res.data.list.forEach(item => {
                    item.checkout = false
                })
                uni.hideLoading()
                var conList = res.data.list;
                this.page++;
                this.conList = this.conList.concat(conList);// 拼接回来的数据
                if (conList.length < 10) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            })

        },
        // 上传的图片
        imgUpSuccess(imageUrl) {
            console.log(imageUrl)
            this.imageUrl.push(imageUrl.data.url)
            console.log(this.fileList)
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 42rpx;

    .createPep_box {
        width: 693rpx;
        height: 80rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 0.8;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 26rpx;

        .createPep_left_box {
            width: 30%;
            height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            line-height: 76rpx;
            color: #F8B857;
        }

        .createPep_right_box {
            width: 55%;
            height: 76rpx;
            text-align: right;
            line-height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FCFCFC;
        }
    }

    .Room_box {
        width: 693rpx;
        height: 80rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 0.8;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 26rpx;

        .Room_left_box {
            width: 30%;
            height: 74rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            line-height: 76rpx;
            color: #F8B857;
            padding-left: 24rpx;
        }

        .Room_right_box {
            width: 55%;
            height: 76rpx;
            text-align: right;
            line-height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FCFCFC;

            /deep/.u-input {
                width: 100%;
                border: none !important;
                text-align: right !important;
                display: flex !important;
                justify-content: flex-end !important;
                padding-right: 24rpx !important;
            }

            /deep/.u-input__input {
                color: #A4A4A4 !important;
                font-size: 30rpx !important;
            }
        }
    }

    .Drawing_box {
        width: 693rpx;
        height: 80rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 0.8;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 26rpx;

        .Drawing_left_box {
            width: 30%;
            height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            line-height: 76rpx;
            color: #F8B857;
        }

        .Drawing_right_box {
            width: 55%;
            height: 76rpx;
            text-align: right;
            line-height: 76rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #A4A4A4;
        }

        .date_right_box {
            width: 55%;
            height: 76rpx;
            text-align: right;
            line-height: 76rpx;
            font-size: 24rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #A4A4A4;
        }
    }

    .upLoad_img_box {
        width: 693rpx;
        background: #393834;
        padding: 24rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        margin-bottom: 178rpx;

        /deep/.u-add-tips {
            display: none;
        }

        /deep/.u-list-item {
            width: 180rpx !important;
            height: 180rpx !important;
            margin: 10rpx !important;
            border: 1rpx solid #D8D6AF;
            background: none !important;
        }

        /deep/.u-progress {
            display: none !important;
        }

        /deep/.u-icon__icon {
            // font-size: 40rpx !important;
            color: #F8B857 !important;
        }

        /deep/.u-delete-icon {
            background: none !important;
            top: 0 !important;
            right: 0 !important;
            font-size: 16rpx !important;
        }

        .title_box {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 30rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #F8B857;
        }

        .upload_box {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .add_img_box {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 1rpx solid #D8D6AF;
        }

        .upload_add_box {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 1rpx solid #D8D6AF;
            text-align: center;
            line-height: 210rpx;
            margin-bottom: 15rpx;
            margin-right: 34rpx;
            position: relative;

            image {
                width: 100%;
                height: 100%;
            }

            .pop_box {
                width: 30rpx;
                height: 30rpx;
                position: absolute;
                top: 10rpx;
                right: 10rpx;
                line-height: 30rpx;
            }
        }
    }

    .create_Room_btn {
        width: 693rpx;
        height: 96rpx;
        background: linear-gradient(177deg, #FFE2B7 0%, #F5B143 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        margin: auto;
        margin-bottom: 50rpx;
        font-size: 36rpx;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        line-height: 96rpx;
        text-align: center;
    }

    .rule_box {
        width: 160rpx;
        height: 35rpx;
        font-size: 28rpx;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #A8A8A8;
        line-height: 35rpx;
        margin: auto;
        text-align: center;
    }

    .select_shop_box {
        width: 693rpx;
        height: 1000rpx;
        background-color: #262626;
        border-radius: 20rpx;

        .select_title_box {
            width: 100%;
            height: 80rpx;
            text-align: center;
            line-height: 80rpx;
            font-size: 30rpx;
            color: #fff;
        }

        .select_big_box {
            width: 100%;
            height: 780rpx;
            padding: 0 20rpx;
            margin-bottom: 20rpx;

            .dange_box {
                width: 200rpx;
                height: 200rpx;
                border: 1rpx solid #D8D6AF;
                float: left;
                border-radius: 20rpx;
                margin-right: 30rpx;
                margin-bottom: 15rpx;
                position: relative;

                .zhezhao_box {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    border-radius: 20rpx;
                    background-color: #ccc;
                    opacity: .5;
                }

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .select_button {
            width: 400rpx;
            height: 90rpx;
            margin: auto;
            text-align: center;
            font-size: 36rpx;
            line-height: 90rpx;
            color: #333;
            background: linear-gradient(177deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx;
        }
    }


}
</style>